<template>
    <div class="big">
        <div class="head">
            <Button @click="now">当天</Button>
            <Button @click="seven">7天</Button>
            <Button @click="thirty">30天</Button>
            <!-- <a href="#"><font color="#53261f">当天</font></a>
            <a href="#"><font color="#53261f">7天</font></a>
            <a href="#"><font color="#53261f">30天</font></a> -->
        </div><br>
        <div>
            <div class="one">
                <p style="text-align:center;font-size:50px">{{num}}</p>
                <p style="text-align:center">总运单数(单)</p>
                <p style="text-align:center">
                    <el-button type="primary" round>
                        <el-link href="./yunmes" target="_blank">立刻查看</el-link>
                    </el-button>
                </p>
            </div>
            &nbsp;
            <div class="two">
                <p style="text-align:center;font-size:50px">{{num2}}</p>
                <p style="text-align:center">总设备数</p>
                <p style="text-align:center">
                    <el-button type="primary" round>
                        <el-link href="./showtag" target="_blank">立刻查看</el-link>
                    </el-button>
                </p>
            </div>
            &nbsp;
            <div class="three">
                <p style="text-align:center;font-size:50px">{{num3}}</p>
                <p style="text-align:center">在途运单</p>
                <p style="text-align:center">
                    <el-button type="primary" round>
                        <el-link href="./yunmes" target="_blank">立刻查看</el-link>
                    </el-button>
                </p>
            </div>
            &nbsp;
            <div class="four">
                <p style="text-align:center;font-size:50px">{{num4}}</p>
                <p style="text-align:center">报警运单</p>
                <p style="text-align:center">
                    <el-button type="primary" round>
                        <el-link href="./yunmes" target="_blank">立刻查看</el-link>
                    </el-button>
                </p>
            </div>
        </div>
    </div>
</template>
<style>
    .head{
        font-size:25px;
        width: 1200px;
        height: 50px;
        background-color: rgba(31, 107, 112, 0.185);
    }
    .one{
        float: left;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        background-color: rgb(255, 255, 255);
        width: 300px;
        height: 300px;
    }
    .two{
        float: left;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        background-color: rgb(255, 255, 255);
        width: 300px;
        height: 300px;
    }
    .three{
        float: left;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        background-color: rgb(255, 255, 255);
        width: 300px;
        height: 300px;
    }
    .four{
        float: left;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        background-color: rgb(255, 255, 255);
        width: 300px;
        height: 300px;
    }
</style>
<script>
import { amount_get } from './axios_api/api';
export default {
    data(){
        return{
            num:"",
            num2:"",
            num3:"",
            num4:""
        }
    },
    methods:{
        now(){
            var params = {day:1}
            amount_get(params).then(resp=>{
                this.num = resp.num;
                this.num2 = resp.num2;
                this.num3 = resp.num3;
                this.num4 = resp.num4;
                console.log(resp.num,'797')
            })
        },
        seven(){
            var params = {day:7}
            amount_get(params).then(resp=>{
                this.num = resp.num;
                this.num2 = resp.num2;
                this.num3 = resp.num3;
                this.num4 = resp.num4;
                console.log(resp.num,'797')
            })
        },
        thirty(){
            var params = {day:7}
            amount_get(params).then(resp=>{
                this.num = resp.num;
                this.num2 = resp.num2;
                this.num3 = resp.num3;
                this.num4 = resp.num4;
                console.log(resp.num,'797')
            })
        },

    }

}
</script>